<template>
  <div>
    <a-form ref="queryRoleFormRef" name="queryRoleForm" :model="queryRoleForm.data" :labelCol="{ span: 8 }" :wrapperCol="{ span: 14 }">
      <a-row :gutter="24">
        <a-col span="8">
          <a-form-item name="roleName" label="角色名称">
            <a-input v-model:value="queryRoleForm.data.roleName" allowClear></a-input>
          </a-form-item>
        </a-col>
        <a-col span="8">
          <a-form-item name="roleKey" label="角色编码">
            <a-input v-model:value="queryRoleForm.data.roleKey" allowClear></a-input>
          </a-form-item>
        </a-col>
        <a-col span="8">
          <a-form-item name="status" label="角色状态">
            <a-select v-model:value="queryRoleForm.data.status" :options="pageData.sysNormalDisableDict" allowClear> </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item name="beginTime" label="创建时间起期">
            <a-date-picker v-model:value="queryRoleForm.data.params.beginTime" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item name="endTime" label="创建时间止期">
            <a-date-picker v-model:value="queryRoleForm.data.params.endTime" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24" class="autoee-button-row">
        <a-col :span="12" style="text-align: left">
          <a-button type="primary" @click="openRoleAddModal()"><AutoeeIcon icon="plus-outlined" v-hasPermi="['system:role:add']" />新增</a-button>
          <a-button type="primary" danger @click="clickDeleteRole()" :disabled="roleTableData.selectedRowKeys.length <= 0" v-hasPermi="['system:role:remove']"><AutoeeIcon icon="delete-outlined" />删除</a-button>
          <a-button type="primary" @click="clickExport()" v-hasPermi="['system:role:export']"><AutoeeIcon icon="export-outlined" />导出</a-button>
        </a-col>
        <a-col :span="12" style="text-align: right">
          <a-button type="primary" @click="roleTablePage.reload()"> <AutoeeIcon icon="SearchOutlined" />查询 </a-button>
          <a-button @click="resetRoleQueryForm()"><AutoeeIcon icon="redo-outlined" />重置</a-button>
        </a-col>
      </a-row>
    </a-form>

    <a-table
      rowKey="roleId"
      :columns="roleTableData.columns"
      :data-source="roleTableData.dataSource"
      :loading="roleTablePage.loading.value"
      :pagination="roleTablePagination"
      @change="roleTableHandChangePage"
      :row-selection="{ selectedRowKeys: roleTableData.selectedRowKeys, onChange: onRoleTableSelectChange }"
      bordered
      size="small"
      tableLayout="fixed"
    >
      <template #bodyCell="{ index, column, record }">
        <template v-if="column.key === 'pageIndex'">
          {{ index + 1 }}
        </template>
        <template v-else-if="column.key === 'status'">
          <span>
            {{ AutoeeUtil.getDictLabelByKey(record.status, pageData.sysNormalDisableDict) }}
          </span>
        </template>
        <template v-else-if="column.key === 'roleTableOperateCol'">
          <span>
            <a @click="openRoleDetailModal(record)"> 查看 </a>
            <a-divider type="vertical" />
            <a @click="openRoleUpdateModal(record)" v-hasPermi="['system:role:edit']"> 修改 </a>
          </span>
        </template>
      </template>
    </a-table>

    <RoleAddUpdateModal ref="roleAddUpdateModalRef" :dataScopeDict="pageData.dataScopeDict" :menuCheckStrictlyDict="pageData.menuCheckStrictlyDict" :sysNormalDisableDict="pageData.sysNormalDisableDict" />
    <RoleDetailModal ref="roleDetailModalRef" :dataScopeDict="pageData.dataScopeDict" :menuCheckStrictlyDict="pageData.menuCheckStrictlyDict" :sysNormalDisableDict="pageData.sysNormalDisableDict" />
  </div>
</template>

<script setup name="Role">
import { listRole, getRole, delRole, addRole, updateRole } from '@/api/system/role';
import RoleAddUpdateModal from './addUpdateModal.vue';
import RoleDetailModal from './detailModal.vue';
import { computed, reactive, ref } from 'vue';
import { AutoeeIcon } from '@/utils/AutoeeIcon.js';
import AutoeeUtil from '@/utils/AutoeeUtil.js';
import { message } from 'ant-design-vue';

// 当前页面使用的数据
const pageData = reactive({
  dataScopeDict: [],
  menuCheckStrictlyDict: [],
  sysNormalDisableDict: [],
});

// 自定义转码字典
pageData.dataScopeDict = [
  {
    value: '1',
    label: '全部数据权限',
  },
  // 暂不支持自定数据权限
  // {
  //   value: '2',
  //   label: '自定数据权限',
  // },
  {
    value: '3',
    label: '本部门数据权限',
  },
  {
    value: '4',
    label: '本部门及以下数据权限',
  },
  {
    value: '5',
    label: '仅本人数据权限',
  },
];

// 自定义树形下拉框转码字典
pageData.menuCheckStrictlyDict = [];
AutoeeUtil.getDictsByType('sys_normal_disable').then((res) => {
  pageData.sysNormalDisableDict = res;
});

// 查询Form
const queryRoleFormRef = ref();
const queryRoleForm = reactive({ data: { params: {} } });

// 重置查询Form
const resetRoleQueryForm = () => {
  AutoeeUtil.resetFormFieldsToEmpty(queryRoleForm.data);
  roleTablePage.reload();
};

// 打开新增窗口
const roleAddUpdateModalRef = ref();
const openRoleAddModal = () => {
  roleAddUpdateModalRef.value.openAddModal(roleTablePage);
};

// 打开修改窗口
const openRoleUpdateModal = (record) => {
  roleAddUpdateModalRef.value.openUpdateModal(record, roleTablePage);
};

// 打开详细窗口
const roleDetailModalRef = ref();
const openRoleDetailModal = (record) => {
  roleDetailModalRef.value.openModal(record);
};

// 点击删除
const clickDeleteRole = () => {
  AutoeeUtil.confirmDeleteSelectedData(() => {
    delRole(roleTableData.selectedRowKeys).then((res) => {
      roleTableData.selectedRowKeys = [];
      AutoeeUtil.messageSuccess('删除操作成功。');
      roleTablePage.reload();
    });
  });
};

// 点击导出
const clickExport = () => {
  AutoeeUtil.download('system/role/export', queryRoleForm.data);
};

// 列表数据
const roleTableData = reactive({
  // 列表数据
  dataSource: [],
  // 列表记录数
  total: 0,
  selectedRowKeys: [],
  // 列表列定义
  columns: [
    {
      title: '序号',
      dataIndex: 'pageIndex',
      key: 'pageIndex',
      width: 50,
      align: 'center',
    },
    {
      title: '角色ID',
      key: 'roleId',
      dataIndex: 'roleId',
    },
    {
      title: '角色名称',
      key: 'roleName',
      dataIndex: 'roleName',
    },
    {
      title: '角色编码',
      key: 'roleKey',
      dataIndex: 'roleKey',
    },
    {
      title: '显示顺序',
      key: 'roleSort',
      dataIndex: 'roleSort',
    },
    {
      title: '角色状态',
      key: 'status',
      dataIndex: 'status',
    },
    {
      title: '创建时间',
      key: 'createTime',
      dataIndex: 'createTime',
    },
    {
      title: '操作',
      key: 'roleTableOperateCol',
      width: 100,
    },
  ],
});

// 查询列表
const queryRoleList = () => {
  return listRole(queryRoleForm.data);
};

// 用户列表翻页数据：使用vue-request中分页方法，返回参数包含{ run, reload, loading, current, pageSize }
const roleTablePage = AutoeeUtil.usePagination(queryRoleList, roleTableData);

// 用户列表翻页工具条：必须通过计算函数每次重新生成
const roleTablePagination = computed(() => AutoeeUtil.getTablePagination(roleTablePage));

// 手动翻页方法
const roleTableHandChangePage = (page, filters, sorter) => {
  AutoeeUtil.tableHandChangePage(roleTablePage, page, filters, sorter);
};

// 列表选中方法
const onRoleTableSelectChange = (selectedRowKeys) => {
  roleTableData.selectedRowKeys = selectedRowKeys;
};
</script>
<style lang="less"></style>
